<template>
  <d2-container class="page">
    <el-row  :gutter="20">
      <el-form ref="form" :model="searchParam" label-width="80px" size="small">
        <el-col :span="20">
          <el-row  :gutter="20">
            <el-col :span="8">
              <el-form-item label="时间">
                <el-date-picker
                  v-model="jysj"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  type="datetimerange"
                  :picker-options="pickerOptions"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  align="left">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="玩家"  label-width="80px">
                <el-autocomplete :fetch-suggestions="querySearchWj" placeholder="请输入玩家" v-model="searchParam.wj"></el-autocomplete>
              </el-form-item>
            </el-col>
             <el-col :span="5">
              <el-form-item label="物品名称"  label-width="80px">
                <el-autocomplete :fetch-suggestions="querySearchWp" placeholder="请输入物品" v-model="searchParam.wp"></el-autocomplete>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="物品编号"  label-width="80px">
                <el-autocomplete :fetch-suggestions="querySearchBh" placeholder="请输入编号" v-model="searchParam.bh"></el-autocomplete>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row  :gutter="20">
            <el-col :span="5" >
              <el-form-item label="服务"  label-width="80px">
                <el-select filterable v-model="searchParam.fw" placeholder="请选择服务" clearable >
                  <el-option v-for="item in servers" :label="item" :value="item" :key="item"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5" :offset="2">
              <el-form-item label="类别"  label-width="80px">
                <el-select filterable v-model="searchParam.lb" placeholder="请选择类别" clearable >
                  <el-option v-for="item in lbList" :label="item" :value="item" :key="item"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5" >
              <el-form-item label="地图"  label-width="70px">
                <el-select filterable v-model="searchParam.dt" value-key="id" placeholder="请选择地图" clearable >
                  <el-option v-for="item in dts" :label="dtLabel(item)" :value="item.id" :key="item.id"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row  :gutter="20">
            <el-col :span="5" >
              <el-form-item label="套装属性"  label-width="80px">
                <el-select filterable v-model="searchParam.tzsx" placeholder="请选择套装属性" clearable >
                  <el-option v-for="item in suitProps" :label="item" :value="item" :key="item"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5" :offset="2">
              <el-form-item label="属性："  label-width="80px">
                <el-cascader  v-model="sxOptionsList" :options="sxOptions" collapse-tags :props="{ multiple: true, checkStrictly: true }" clearable  style="margin-bottom:20px;width:100%;" @change="handleLabelChange"></el-cascader>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="物品等级"  label-width="80px">
                <el-autocomplete :fetch-suggestions="querySearchWpdj" placeholder="请输入物品等级" v-model="searchParam.wpdj"></el-autocomplete>
              </el-form-item>
            </el-col>
            <el-col :span="2" >
              <el-form-item label="任意属性"  label-width="100px">
                 <el-switch v-model="searchParam.anyone"></el-switch>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" plain @click="filterPage">筛选</el-button>
          <el-button type="warning" plain @click="initSearchParam">清空条件</el-button>
        </el-col>
      </el-form>
    </el-row>

    <el-row  :gutter="20">
      <el-table :data="pageinfo.records" style="width: 100%" border>
        <el-table-column prop="sj" label="时间" width="160" show-overflow-tooltip> </el-table-column>
        <el-table-column prop="lb" label="类别" width="110" show-overflow-tooltip> </el-table-column>
        <el-table-column prop="zh" label="账号" width="120" show-overflow-tooltip> </el-table-column>
        <el-table-column prop="wj" label="玩家" width="160" show-overflow-tooltip> </el-table-column>
        <el-table-column prop="wp" label="物品名称" width="110" show-overflow-tooltip> </el-table-column>
        <el-table-column prop="bh" label="物品编号" width="100" show-overflow-tooltip> </el-table-column>
        <el-table-column prop="ex" label="装备属性" width="160" show-overflow-tooltip> </el-table-column>
        <el-table-column prop="dt" label="地图" width="70" show-overflow-tooltip> </el-table-column>
        <el-table-column prop="wpdj" label="物品等级" width="50" show-overflow-tooltip> </el-table-column>
        <el-table-column prop="text" label="报文"  show-overflow-tooltip> </el-table-column>
        <el-table-column label="服务" width="160" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-tag size="medium">{{ scope.row.fw }}</el-tag>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageinfo.current"
        :page-sizes="[10, 20, 40, 80]"
        :page-size="pageinfo.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageinfo.total">
      </el-pagination>
      <div style="display: inline-block;font-size: 13px;color:#606266;float: right;margin-top: -20px;margin-right: 20px;">
        在线人数:<span style="color: red">{{zxrs}}</span>
         ;&nbsp产出比({{pageinfo.total}}/{{zxrs}}):<span style="color: red">{{zxzb}}</span>
      </div>
    </el-row>
  </d2-container>
</template>

<script>
export default {
  data() {
    return {
      zxrs:0,
      zxzb:0,
      tableData: [],
      jysj:[],
      searchParam:{},
      lines:[],
      pageinfo:{records:[],current:1,size: 10,total:0},
      servers:[],
      dts:[],
      suitProps:[],
      sxOptions:[],
      sxOptionsList:[],
      oldSx:[],
      lbList:["掉落","自定义物品交换","自定义奖励","自定义合成","合成"],
      pickerOptions: {
          shortcuts: [{
            text: '最近六小时',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 6);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近十二小时',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 12);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一天',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 );
              picker.$emit('pick', [start, end]);
            }
          }]
        },
    }
  },
  methods: {
    dtLabel(item){
      return item.id+" => "+item.name;
    },
    filterPage(){
      this.$api.setIntoStorage("monitorWpList",this.searchParam.wp)
      this.$api.setIntoStorage("monitorWjList",this.searchParam.wj)
      this.$api.setIntoStorage("monitorWpdjList",this.searchParam.wpdj)
      this.$api.setIntoStorage("monitorBhList",this.searchParam.bh)
      this.pageinfo.current=1
      this.searchPage()
    },
    searchPage(){
      if(this.jysj.length===2){
        this.searchParam.startTime = this.jysj[0]
        this.searchParam.endTime = this.jysj[1]
      }
      if(this.sxOptionsList && this.sxOptionsList.length>0){
        var sxs = [0,0,0,0,0,0]
        this.sxOptionsList.forEach(row=>{
          if(row[1] || row[1]===0){
            sxs[row[1]] = 1
          }
        })
        this.searchParam.sx = sxs.join()
      }else{
        this.searchParam.sx = ""
      }
      this.searchParam.currentPage= this.pageinfo.current
      this.searchParam.pageSize= this.pageinfo.size
      console.log("searchParam:",this.searchParam)
      console.log("pageinfo:",this.pageinfo)
      this.showPageApi()
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageinfo.size = val
      this.searchPage()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageinfo.current = val
      this.searchPage()
    },
    querySearchWp(queryString, cb) {
      cb(JSON.parse(localStorage.getItem('monitorWpList')))
    },
    querySearchBh(queryString, cb) {
      cb(JSON.parse(localStorage.getItem('monitorBhList')))
    },
    querySearchWj(queryString, cb) {
      cb(JSON.parse(localStorage.getItem('monitorWjList')))
    },
    querySearchWpdj(queryString, cb) {
      cb(JSON.parse(localStorage.getItem('monitorWpdjList')))
    },
    handleLabelChange (newValue) {
      console.log("newValue",newValue)
      let isFaChange = false
      if (newValue && newValue.length !== 0 && this.sxOptionsList && this.sxOptionsList.length !== 0) { // 如果值都存在
        let father = newValue.map(v => v[0]);
        if (!father.every(value => value === this.sxOptionsList[0][0])) { // 父级改变
          isFaChange = true
        }
      }
      if (isFaChange) { // 父级发生变化
        // 获取变化的父级元素
        newValue = newValue.filter(v => v[0] !== this.oldSx[0][0])
        this.oldSx = newValue
        this.sxOptionsList = newValue
        return
      }
      // 值都不存在直接赋值
      this.oldSx = newValue
      this.sxOptionsList = newValue
      console.log("this.sxOptionsList",this.sxOptionsList)
    },
    initSearchParam(){
      this.searchParam={
        "currentPage": 1,
        "endTime": "",
        "lb": "",
        "pageSize": 10,
        "startTime": "",
        "wp": "",
        "wj": "",
        "wpdj": "",
        "fw":"",
        "dt":null,
        "tzsx":"",
        "sx":"",
        "anyone":false,
        "bh":""
      }
      this.jysj=[]
      this.sxOptionsList = []
      this.zxrs=0
      this.zxzb=0
    },
    async initData () {
      try {
        const res = await this.$api.FILE_GET("json/data.json")
        console.log("initData",res)
        res.forEach(row => {
          var children = []
          let i = 0;
          if(row.sxList){
            row.sxList.forEach(r=>{children.push({value: i++, label: r.name})})
          }
          this.sxOptions.push ({value: row.lb, label: row.lb,children:children})
        })
        console.log("sxOptions",this.sxOptions)
      } catch (error) {
        console.log(error)
      }
    },
    async initServer () {
      try {
        const res = await this.$api.FILE_GET("json/server.json")
        console.log("initServer",res)
        this.servers = res
      } catch (error) {
        console.log(error)
      }
    },
    async initDts () {
      try {
        const res = await this.$api.FILE_GET("json/dts.json")
        console.log("initDts",res)
        this.dts = res
      } catch (error) {
        console.log(error)
      }
    },
    async initSuitProps () {
      try {
        const res = await this.$api.FILE_GET("json/suitProps.json")
        console.log("initSuitProps",res)
        this.suitProps = res
      } catch (error) {
        console.log(error)
      }
    },
    async showPageApi () {
      try {
        const res = await this.$api.MONITOR_PAGE(this.searchParam)
        console.log("showPageApi",res)
        this.pageinfo = res.data
         //获取在线人数
        const zxrsinfo = await this.$api.MONITOR_ZXRS(this.searchParam.dt)
        this.zxrs = zxrsinfo.data
        this.zxzb=this.pageinfo.total==0||this.zxrs ==0?0:(this.pageinfo.total/this.zxrs).toFixed(2);
      } catch (error) {
        console.log(error)
      }
    },
    init() {
      this.showPageApi()
      this.initServer()
      this.initDts()
      this.initSuitProps()
      this.initData()
    },
  },
  created() {
    this.init()
  }
}
</script>

<style>
.el-row {
    margin-bottom: 0px;
  }

</style>
<style>
.el-cascader-menu {
  height: 225px;
}
.el-cascader-menu__wrap {
    height: 225px;
}
</style>
